การจัดการลำดับความสำคัญของการเลือกข้อความด้วย CSS Custom Highlight Cascade

ไฮไลท์การเลือกข้อความเริ่มต้นในเว็บเบราว์เซอร์มักจะเป็นพื้นหลังสีน้ำเงินธรรมดากับข้อความสีขาว ถึงแม้จะใช้งานได้ แต่มันอาจไม่สอดคล้องกับแบรนด์หรือข้อกำหนดด้านการเข้าถึงของเว็บไซต์ของคุณ โชคดีที่ CSS มีเครื่องมือที่ทรงพลังในการปรับแต่งไฮไลท์การเลือกข้อความ ทำให้คุณสามารถสร้างประสบการณ์ที่น่าดึงดูดสายตาและเป็นมิตรกับผู้ใช้ได้ โพสต์นี้จะเจาะลึกเกี่ยวกับ CSS custom highlight cascade โดยสำรวจเทคนิคต่างๆ ที่มีอยู่และวิธีจัดการลำดับความสำคัญเพื่อให้ได้ผลลัพธ์ที่ต้องการ เราจะครอบคลุมถึง pseudo-element มาตรฐาน ::selection, pseudo-element ที่ซับซ้อนกว่าอย่าง ::highlight และวิธีการกำหนดไฮไลท์แบบกำหนดเอง โดยเน้นไปที่กฎ cascade และ specificity ที่ควบคุมการทำงานของมัน

ทำความเข้าใจพื้นฐาน: Pseudo-element ::selection

pseudo-element ::selection เป็นพื้นฐานของการจัดสไตล์การเลือกข้อความใน CSS มันช่วยให้คุณสามารถปรับเปลี่ยนลักษณะของข้อความที่ถูกเลือกภายใน element ได้ มันได้รับการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์สมัยใหม่และเป็นวิธีที่ง่ายในการปรับแต่งสีพื้นหลัง สีข้อความ และคุณสมบัติพื้นฐานอื่นๆ ของข้อความที่ถูกเลือก

การใช้งานพื้นฐานของ ::selection

ในการใช้ ::selection คุณเพียงแค่กำหนดเป้าหมายด้วยกฎ CSS และกำหนดสไตล์ที่ต้องการ ตัวอย่างเช่น หากต้องการเปลี่ยนสีพื้นหลังเป็นสีเหลืองและสีข้อความเป็นสีดำเมื่อข้อความถูกเลือก คุณจะใช้ CSS ต่อไปนี้:

            ::selection {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

กฎนี้จะถูกนำไปใช้กับการเลือกข้อความทั้งหมดบนเว็บไซต์ของคุณ หากคุณต้องการกำหนดเป้าหมายเฉพาะ element คุณสามารถใช้ selector ที่เฉพาะเจาะจงมากขึ้น:

            p::selection {
  background-color: lightgreen;
  color: darkgreen;
}

            

              
                Copy
              
            
          

กฎนี้จะส่งผลต่อการเลือกข้อความภายใน element <p> (ย่อหน้า) เท่านั้น

ข้อจำกัดของ ::selection

แม้ว่า ::selection จะเป็นเครื่องมือที่มีประโยชน์ แต่ก็มีข้อจำกัด โดยหลักแล้วมันอนุญาตให้คุณแก้ไขคุณสมบัติพื้นฐานเช่น background-color และ color เท่านั้น ตัวเลือกการจัดสไตล์ที่ซับซ้อนมากขึ้น เช่น การใช้การไล่ระดับสี (gradients) หรือเงา (shadows) ไม่ได้รับการสนับสนุนโดยตรง นอกจากนี้ ::selection ยังไม่มีกลไกในการสร้างไฮไลท์หลายๆ อันที่ทับซ้อนกันด้วยสไตล์ที่แตกต่างกัน นี่คือจุดที่ pseudo-element ::highlight เข้ามามีบทบาท

ขอแนะนำ ::highlight: ทางเลือกที่ทรงพลังกว่า

pseudo-element ::highlight เป็นส่วนเสริมใหม่ล่าสุดของ CSS ที่ให้ความยืดหยุ่นและการควบคุมไฮไลท์การเลือกข้อความได้มากขึ้น มันช่วยให้คุณสามารถกำหนดไฮไลท์ที่มีชื่อ (named highlights) ทำให้คุณสามารถใช้สไตล์ที่แตกต่างกันกับส่วนต่างๆ ของข้อความที่ถูกเลือกได้ ซึ่งมีประโยชน์อย่างยิ่งสำหรับเลย์เอาต์ที่ซับซ้อนหรือเมื่อคุณต้องการแยกแยะเนื้อหาประเภทต่างๆ ภายในส่วนที่เลือก

การกำหนดไฮไลท์ที่มีชื่อด้วยคุณสมบัติ highlight-name

กุญแจสำคัญในการใช้ ::highlight คือคุณสมบัติ highlight-name คุณสมบัตินี้ช่วยให้คุณสามารถกำหนดชื่อให้กับไฮไลท์ที่เฉพาะเจาะจง ซึ่งคุณสามารถกำหนดเป้าหมายด้วยกฎ CSS ได้ ในการใช้ ::highlight คุณต้องกำหนดไฮไลท์ที่มีชื่อโดยใช้ JavaScript ก่อน เนื่องจาก CSS ไม่สามารถกำหนดชื่อไฮไลท์ใหม่ได้ด้วยตัวเอง มันทำได้เพียง *จัดสไตล์* ไฮไลท์ที่เบราว์เซอร์ได้สร้างขึ้นแล้วเท่านั้น นี่คือตัวอย่าง:

            // JavaScript:
CSS.registerProperty({
  name: '--my-custom-highlight',
  syntax: '<color>',
  inherits: false,
  initialValue: 'transparent',
});

            

              
                Copy
              
            
          

โค้ด Javascript นี้จะลงทะเบียน CSS custom property ที่ชื่อว่า --my-custom-highlight ซึ่งรับค่าสีและไม่สืบทอดคุณสมบัติ นี่เป็นขั้นตอนที่จำเป็นก่อนที่จะจัดสไตล์ไฮไลท์ของคุณ ตอนนี้คุณสามารถใช้ CSS เพื่อใช้ไฮไลท์ได้แล้ว:

            ::highlight(my-custom-highlight) {
  background-color: rgba(255, 0, 0, 0.3);
  color: white;
}

            

              
                Copy
              
            
          

กฎ CSS นี้จะกำหนดเป้าหมายไฮไลท์ที่ชื่อว่า "my-custom-highlight" และใช้พื้นหลังสีแดงที่มีความโปร่งใส 30% และข้อความสีขาว สังเกตการใช้ rgba เพื่อให้ได้ความโปร่งใส คุณต้องสร้างชื่อ (เช่น `my-custom-highlight`) แล้วอ้างอิงถึงมันใน CSS ผ่าน ::highlight(my-custom-highlight)

การใช้ไฮไลท์ด้วย JavaScript

ตอนนี้ เพื่อที่จะใช้ไฮไลท์ในหน้าเว็บของเราจริงๆ เราจะใช้ Javascript ซึ่งโดยทั่วไปจะทำโดยการครอบส่วนของข้อความที่ต้องการไฮไลท์ด้วยแท็ก <span> และกำหนดสไตล์ highlight-name:

            <p>This is some <span style="--highlight: my-custom-highlight;">important</span> text.</p>

            

              
                Copy
              
            
          

ในตัวอย่างนี้ คำว่า "important" จะถูกไฮไลท์ด้วยสไตล์ที่กำหนดไว้สำหรับ "my-custom-highlight" อีกตัวอย่างหนึ่งคือ:

            <p>This is <span style="--highlight: warning-highlight;">a warning message</span> that needs attention.</p>

            

              
                Copy
              
            
          

โดยที่ 'warning-highlight' สอดคล้องกับชื่อที่คุณลงทะเบียนไว้กับ CSS.registerProperty และใช้ภายในบล็อก CSS ::highlight(warning-highlight)

ข้อดีของ ::highlight

• ไฮไลท์ได้หลายแบบ: คุณสามารถกำหนดไฮไลท์ที่มีชื่อได้หลายแบบและนำไปใช้กับส่วนต่างๆ ของข้อความ
• ควบคุมได้ละเอียด: คุณสามารถกำหนดเป้าหมายส่วนเฉพาะของข้อความด้วยสไตล์ไฮไลท์ที่แตกต่างกัน
• การไฮไลท์ตามความหมาย: คุณสามารถใช้ไฮไลท์เพื่อสื่อความหมาย เช่น การไฮไลท์ข้อผิดพลาดหรือคำเตือน

ทำความเข้าใจ CSS Highlight Cascade: ลำดับความสำคัญและความเฉพาะเจาะจง

เมื่อมีสไตล์ไฮไลท์หลายแบบถูกนำไปใช้กับข้อความเดียวกัน CSS cascade จะเป็นตัวกำหนดว่าสไตล์ใดจะมีผลบังคับใช้ cascade คือชุดของกฎที่เบราว์เซอร์ใช้เพื่อแก้ไขข้อขัดแย้งระหว่างกฎ CSS ที่แตกต่างกัน การทำความเข้าใจ cascade เป็นสิ่งสำคัญสำหรับการจัดการสไตล์ไฮไลท์แบบกำหนดเองและเพื่อให้แน่ใจว่าสไตล์ที่ต้องการถูกนำไปใช้อย่างถูกต้อง

ลำดับความสำคัญ

CSS cascade จะเป็นไปตามลำดับความสำคัญที่เฉพาะเจาะจง ซึ่งสามารถสรุปได้ดังนี้ (จากลำดับความสำคัญต่ำสุดไปสูงสุด):

1. สไตล์ของ User-agent: สไตล์เริ่มต้นของเบราว์เซอร์
2. สไตล์ของผู้ใช้: สไตล์ที่ผู้ใช้กำหนด (เช่น ผ่านส่วนขยายของเบราว์เซอร์)
3. สไตล์ของผู้เขียน: สไตล์ที่นักพัฒนาเว็บไซต์กำหนด (CSS ของคุณ)
4. สไตล์ของผู้เขียนที่มี !important: สไตล์ที่นักพัฒนาเว็บไซต์กำหนดด้วยคีย์เวิร์ด !important
5. สไตล์ของผู้ใช้ที่มี !important: สไตล์ที่ผู้ใช้กำหนดด้วยคีย์เวิร์ด !important

ภายในแต่ละระดับเหล่านี้ ความเฉพาะเจาะจง (specificity) มีบทบาทสำคัญ ความเฉพาะเจาะจงหมายถึงน้ำหนักหรือความสำคัญของ CSS selector โดย selector ที่เฉพาะเจาะจงกว่าจะแทนที่ selector ที่เฉพาะเจาะจงน้อยกว่า

กฎความเฉพาะเจาะจง (Specificity)

ความเฉพาะเจาะจงคำนวณจากกฎต่อไปนี้:

1. Inline styles: สไตล์ที่กำหนดโดยตรงใน element ของ HTML โดยใช้ attribute style มีความเฉพาะเจาะจงสูงสุด
2. IDs: Selector ที่กำหนดเป้าหมาย element ด้วย ID (เช่น #my-element) มีความเฉพาะเจาะจงสูง
3. Classes, pseudo-classes, and attributes: Selector ที่กำหนดเป้าหมาย element ด้วย class (เช่น .my-class), pseudo-classes (เช่น :hover), หรือ attributes (เช่น [type="text"]) มีความเฉพาะเจาะจงปานกลาง
4. Elements and pseudo-elements: Selector ที่กำหนดเป้าหมาย element ด้วยชื่อแท็ก (เช่น p) หรือ pseudo-elements (เช่น ::selection, ::highlight) มีความเฉพาะเจาะจงต่ำ
5. Universal selector: Universal selector (*) มีความเฉพาะเจาะจงต่ำที่สุด

เมื่อมี selector หลายตัวถูกนำไปใช้กับ element เดียวกัน เบราว์เซอร์จะคำนวณความเฉพาะเจาะจงของแต่ละ selector และใช้สไตล์จาก selector ที่มีความเฉพาะเจาะจงสูงสุด หาก selector สองตัวมีความเฉพาะเจาะจงเท่ากัน สไตล์จาก selector ที่ปรากฏในลำดับหลังสุดในไฟล์ CSS จะถูกนำมาใช้

การนำความเฉพาะเจาะจงไปใช้กับสไตล์ไฮไลท์

เมื่อทำงานกับสไตล์ไฮไลท์แบบกำหนดเอง ความเฉพาะเจาะจงมีความสำคัญเป็นพิเศษเพราะคุณอาจใช้ทั้ง ::selection และ ::highlight ควบคู่ไปกับ inline styles นี่คือวิธีที่การพิจารณาความเฉพาะเจาะจงอาจมีผล:

1. ::selection vs. ::highlight: โดยทั่วไปแล้ว ::highlight ถือว่า *มีความเฉพาะเจาะจงมากกว่า* ::selection ซึ่งหมายความว่าหากทั้งกฎ ::selection และ ::highlight ถูกนำไปใช้กับข้อความเดียวกัน โดยปกติแล้วกฎของ ::highlight จะมีผลบังคับใช้ก่อน
2. Inline Styles: เช่นเคย inline styles (การใช้ attribute style โดยตรงบน element ของ HTML) จะแทนที่ทั้งสไตล์ของ ::selection และ ::highlight เว้นแต่จะมีการใช้ !important
3. Selector Specificity: ความเฉพาะเจาะจงของ selector ที่ใช้กับ ::highlight สามารถมีอิทธิพลต่อผลลัพธ์ได้อีก ตัวอย่างเช่น p::highlight(my-highlight) มีความเฉพาะเจาะจงมากกว่าแค่ ::highlight(my-highlight) และจะมีผลบังคับใช้ก่อนหากทั้งสองถูกนำไปใช้

ตัวอย่างการทำงานของความเฉพาะเจาะจง

ลองดูตัวอย่างเพื่อความเข้าใจที่มากขึ้น:

            /* CSS */
::selection {
  background-color: blue;
  color: white;
}

::highlight(my-highlight) {
  background-color: red;
  color: yellow;
}

            

              
                Copy
              
            
          

            <p>This is some <span style="--highlight: my-highlight;">important</span> text.</p>

            

              
                Copy
              
            
          

ในกรณีนี้ เมื่อผู้ใช้เลือกข้อความ ส่วนที่ทำเครื่องหมายเป็น "my-highlight" จะมีพื้นหลังสีแดงและข้อความสีเหลือง เพราะกฎ ::highlight(my-highlight) มีความเฉพาะเจาะจงมากกว่าและจะแทนที่กฎ ::selection ทั่วไปสำหรับ span นั้นๆ

พิจารณาอีกตัวอย่างหนึ่ง:

            /* CSS */
::selection {
  background-color: blue;
  color: white;
}

p::selection {
  background-color: green;
  color: black;
}

            

              
                Copy
              
            
          

            <p>This is some text.</p>

            

              
                Copy
              
            
          

ที่นี่ หากผู้ใช้เลือกข้อความภายในแท็ก <p> ข้อความนั้นจะมีพื้นหลังสีเขียวและข้อความสีดำ selector p::selection มีความเฉพาะเจาะจงมากกว่า selector ::selection ทั่วไป

กลยุทธ์ในการจัดการ Highlight Cascade

เพื่อจัดการ highlight cascade อย่างมีประสิทธิภาพและเพื่อให้แน่ใจว่าสไตล์ไฮไลท์แบบกำหนดเองของคุณถูกนำไปใช้ตามที่ตั้งใจไว้ ให้พิจารณากลยุทธ์ต่อไปนี้:

1. ใช้ Selector ที่เฉพาะเจาะจง

ใช้ selector ที่เฉพาะเจาะจงเพื่อกำหนดเป้าหมาย element ที่คุณต้องการจัดสไตล์ ตัวอย่างเช่น แทนที่จะใช้กฎ ::selection ทั่วโลก ให้กำหนดเป้าหมาย element หรือส่วนเฉพาะของเว็บไซต์ของคุณโดยใช้ selector ที่เฉพาะเจาะจงมากขึ้นเช่น .my-section::selection หรือ #my-element::selection

2. ใช้ประโยชน์จากคุณสมบัติ highlight-name

เมื่อใดก็ตามที่เป็นไปได้ ให้ใช้คุณสมบัติ highlight-name กับ ::highlight เพื่อกำหนดไฮไลท์ที่มีชื่อ ซึ่งจะช่วยให้คุณสามารถกำหนดเป้าหมายส่วนเฉพาะของข้อความและใช้สไตล์ที่แตกต่างกันตามความหมายทาง semantic หรือบริบทของมัน

3. หลีกเลี่ยงการใช้ !important (โดยทั่วไป)

แม้ว่าคีย์เวิร์ด !important อาจดูน่าดึงดูดใจ แต่ควรหลีกเลี่ยงเมื่อใดก็ตามที่เป็นไปได้ การใช้ !important อาจทำให้ CSS ของคุณดูแลรักษายากขึ้นและอาจนำไปสู่ความขัดแย้งที่ไม่คาดคิด แทนที่จะทำเช่นนั้น ให้มุ่งเน้นไปที่การใช้ความเฉพาะเจาะจงเพื่อควบคุม cascade

4. จัดระเบียบ CSS ของคุณ

จัดระเบียบ CSS ของคุณอย่างมีเหตุผลและสม่ำเสมอ ใช้ความคิดเห็น (comments) เพื่อเอกสารโค้ดของคุณและจัดกลุ่มสไตล์ที่เกี่ยวข้องกันไว้ด้วยกัน ซึ่งจะทำให้ง่ายต่อการทำความเข้าใจและบำรุงรักษา CSS ของคุณ

5. ทดสอบอย่างละเอียด

ทดสอบสไตล์ไฮไลท์แบบกำหนดเองของคุณอย่างละเอียดในเบราว์เซอร์และอุปกรณ์ต่างๆ เบราว์เซอร์ที่แตกต่างกันอาจมีการนำ CSS cascade ไปใช้ที่แตกต่างกันเล็กน้อย ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องแน่ใจว่าสไตล์ของคุณถูกนำไปใช้อย่างสม่ำเสมอบนทุกแพลตฟอร์ม

6. คำนึงถึงการเข้าถึงได้ (Accessibility)

คำนึงถึงการเข้าถึงได้เสมอเมื่อออกแบบสไตล์ไฮไลท์แบบกำหนดเอง ตรวจสอบให้แน่ใจว่าสีที่คุณเลือกให้ความคมชัดเพียงพอระหว่างข้อความและพื้นหลัง นอกจากนี้ หลีกเลี่ยงการใช้สไตล์ที่อาจทำให้ผู้ใช้ที่มีความบกพร่องทางสติปัญญาสับสนหรือเสียสมาธิ

ข้อควรพิจารณาด้านการเข้าถึงได้ (Accessibility)

การปรับแต่งไฮไลท์การเลือกข้อความสามารถปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก แต่สิ่งสำคัญคือต้องให้ความสำคัญกับการเข้าถึงได้ ไฮไลท์ที่ออกแบบมาไม่ดีอาจทำให้ผู้ใช้ที่มีความบกพร่องทางการมองเห็นหรือความบกพร่องทางสติปัญญาอ่านและเข้าใจเนื้อหาได้ยาก

ความคมชัดของสี (Color Contrast)

ตรวจสอบให้แน่ใจว่าความคมชัดของสีระหว่างข้อความและพื้นหลังเพียงพอ แนวทางปฏิบัติเพื่อการเข้าถึงเนื้อหาเว็บ (WCAG) แนะนำอัตราส่วนความคมชัดอย่างน้อย 4.5:1 สำหรับข้อความปกติและ 3:1 สำหรับข้อความขนาดใหญ่ ใช้เครื่องมือออนไลน์เพื่อตรวจสอบอัตราส่วนความคมชัดของสีไฮไลท์ของคุณ

หลีกเลี่ยงการกะพริบ

หลีกเลี่ยงการใช้เอฟเฟกต์กะพริบในสไตล์ไฮไลท์ของคุณ เอฟเฟกต์เหล่านี้อาจทำให้เสียสมาธิและอาจกระตุ้นให้เกิดอาการชักในผู้ใช้ที่เป็นโรคลมชักที่ไวต่อแสง

ให้สัญญาณภาพที่ชัดเจน

ตรวจสอบให้แน่ใจว่าสไตล์ไฮไลท์ให้สัญญาณภาพที่ชัดเจนเพื่อบ่งชี้ว่าข้อความถูกเลือก หลีกเลี่ยงการใช้สไตล์ที่อาจกำกวมหรือสับสน ตัวอย่างเช่น หลีกเลี่ยงการใช้สีพื้นหลังที่คล้ายกับสีพื้นหลังเริ่มต้นมากเกินไป

ทดสอบกับเทคโนโลยีอำนวยความสะดวก

ทดสอบสไตล์ไฮไลท์แบบกำหนดเองของคุณกับเทคโนโลยีอำนวยความสะดวก เช่น โปรแกรมอ่านหน้าจอ (screen readers) ตรวจสอบให้แน่ใจว่าข้อความที่ถูกเลือกได้รับการประกาศอย่างถูกต้องโดยโปรแกรมอ่านหน้าจอ และสไตล์ไฮไลท์ไม่รบกวนความสามารถของผู้ใช้ในการนำทางและทำความเข้าใจเนื้อหา

ข้อควรพิจารณาด้านความเป็นสากล (Internationalization) และการปรับให้เข้ากับท้องถิ่น (Localization)

เมื่อพัฒนาเว็บไซต์สำหรับผู้ชมทั่วโลก สิ่งสำคัญคือต้องพิจารณาความเป็นสากล (i18n) และการปรับให้เข้ากับท้องถิ่น (l10n) ซึ่งรวมถึงการปรับเนื้อหาและการออกแบบของเว็บไซต์ของคุณให้เข้ากับภาษา วัฒนธรรม และภูมิภาคต่างๆ

ทิศทางของข้อความ

ระวังทิศทางของข้อความที่แตกต่างกัน บางภาษา เช่น ภาษาอาหรับและฮีบรู เขียนจากขวาไปซ้าย (RTL) ตรวจสอบให้แน่ใจว่าสไตล์ไฮไลท์แบบกำหนดเองของคุณทำงานได้อย่างถูกต้องทั้งกับทิศทางข้อความจากซ้ายไปขวา (LTR) และ RTL คุณสมบัติทางตรรกะของ CSS (เช่น margin-inline-start, border-inline-end) สามารถช่วยได้ที่นี่

ความแตกต่างทางวัฒนธรรม

คำนึงถึงความแตกต่างทางวัฒนธรรมเมื่อเลือกสีไฮไลท์ สีสามารถมีความหมายที่แตกต่างกันในวัฒนธรรมที่แตกต่างกัน ตัวอย่างเช่น สีแดงอาจเป็นสัญลักษณ์ของความโชคดีในวัฒนธรรมหนึ่งและเป็นอันตรายในอีกวัฒนธรรมหนึ่ง ศึกษาความสำคัญทางวัฒนธรรมของสีในตลาดเป้าหมายสำหรับเว็บไซต์ของคุณ

การรองรับฟอนต์

ตรวจสอบให้แน่ใจว่าฟอนต์ที่คุณเลือกสนับสนุนอักขระและสัญลักษณ์ที่ใช้ในภาษาต่างๆ ใช้ฟอนต์ Unicode ที่สนับสนุนอักขระที่หลากหลาย นอกจากนี้ ให้พิจารณาใช้กลยุทธ์การสำรองฟอนต์ (font fallback) เพื่อให้แน่ใจว่าข้อความของเว็บไซต์ของคุณแสดงผลอย่างถูกต้องแม้ว่าอุปกรณ์ของผู้ใช้จะไม่ได้ติดตั้งฟอนต์ที่จำเป็นก็ตาม

ตัวอย่างการใช้งานจริงและกรณีศึกษา

มาดูตัวอย่างการใช้งานจริงและกรณีศึกษาสำหรับ CSS custom highlight cascade กัน:

1. การไฮไลท์โค้ดตามความหมาย (Semantic Highlighting)

คุณสามารถใช้ไฮไลท์แบบกำหนดเองเพื่อไฮไลท์องค์ประกอบของโค้ดประเภทต่างๆ เช่น คำสำคัญ (keywords), ตัวแปร (variables) และความคิดเห็น (comments) ซึ่งจะช่วยให้ผู้ใช้อ่านและเข้าใจส่วนของโค้ดได้ง่ายขึ้น

            /* CSS */
::highlight(keyword) {
  color: #0077cc;
}

::highlight(variable) {
  color: #cc0077;
}

::highlight(comment) {
  color: #666666;
  font-style: italic;
}

            

              
                Copy
              
            
          

            <pre><code>
  <span style="--highlight: keyword;">function</span> <span style="--highlight: variable;">greet</span>(<span style="--highlight: variable;">name</span>) {
    <span style="--highlight: comment;">// This is a comment</span>
    console.log("Hello, " + <span style="--highlight: variable;">name</span> + "!");
  }
</code></pre>

            

              
                Copy
              
            
          

2. การไฮไลท์คำค้นหา

คุณสามารถใช้ไฮไลท์แบบกำหนดเองเพื่อไฮไลท์คำค้นหาภายในผลการค้นหา ซึ่งจะช่วยให้ผู้ใช้ระบุส่วนของข้อความที่เกี่ยวข้องกับคำค้นหาของตนได้อย่างรวดเร็ว

            /* CSS */
::highlight(search-term) {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

            <p>This is a <span style="--highlight: search-term;">search</span> result that contains the <span style="--highlight: search-term;">search</span> term.</p>

            

              
                Copy
              
            
          

3. การบ่งชี้ช่องที่จำเป็นต้องกรอกในฟอร์ม

คุณสามารถใช้ไฮไลท์แบบกำหนดเองเพื่อบ่งชี้ช่องที่จำเป็นต้องกรอกในฟอร์ม ซึ่งจะช่วยให้ผู้ใช้ระบุช่องที่ต้องกรอกก่อนส่งฟอร์มได้อย่างรวดเร็ว

            /* CSS */
::highlight(required) {
  background-color: #ffeeee;
  border: 1px solid red;
}

            

              
                Copy
              
            
          

            <label for="name">Name:</label>
<input type="text" id="name" <span style="--highlight: required;">required</span><br>

            

              
                Copy
              
            
          

สรุป

CSS custom highlight cascade มีเครื่องมือที่ทรงพลังสำหรับการปรับแต่งไฮไลท์การเลือกข้อความและสร้างประสบการณ์ที่น่าดึงดูดสายตาและเป็นมิตรกับผู้ใช้ โดยการทำความเข้าใจ CSS cascade, กฎความเฉพาะเจาะจง และความสามารถของ ::selection และ ::highlight คุณสามารถจัดการสไตล์ไฮไลท์ได้อย่างมีประสิทธิภาพและมั่นใจได้ว่าจะถูกนำไปใช้ตามที่ตั้งใจไว้ อย่าลืมคำนึงถึงการเข้าถึงได้และความเป็นสากลเมื่อออกแบบสไตล์ไฮไลท์แบบกำหนดเองเพื่อสร้างเว็บไซต์ที่ครอบคลุมและเข้าถึงได้สำหรับผู้ชมทั่วโลก โดยการวางแผนการใช้ ::selection และ ::highlight อย่างรอบคอบควบคู่ไปกับ HTML เชิงความหมายและ CSS Custom Properties คุณจะสามารถสร้างเอฟเฟกต์การไฮไลท์ที่ต้องการได้อย่างแม่นยำ ซึ่งจะช่วยเพิ่มทั้งการใช้งานและความสวยงามของหน้าเว็บของคุณ ความยืดหยุ่นที่นำเสนอโดยคุณสมบัติ CSS เหล่านี้ช่วยให้คุณสร้างประสบการณ์ที่ปรับแต่งได้และใช้งานง่ายสำหรับผู้ใช้ ทำให้เนื้อหาของคุณน่าสนใจและเข้าถึงได้มากขึ้น